<script setup>
import { ref } from 'vue';

const features = ref([
    { title: '实时语音识别', description: '内置高灵敏度麦克风，能够准确捕捉您的声音，并实时转化为文本，为与 AI 交流打下基础。', iconBg: 'icon-bg-cyan', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>' },
    { title: '大模型驱动', description: '通过 Wi-Fi 连接到主流大语言模型 API，无论是知识问答、创意写作还是日常闲聊，都能轻松应对。', iconBg: 'icon-bg-violet', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="m16 14-4-4"/><path d="M3 21h18"/><path d="M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16"/><path d="M17 21v-4H7v4"/><path d="M7 3v4h10V3"/></svg>' },
    { title: '自然语音合成', description: '将 AI 生成的文本回复转换成自然、流畅的语音，并通过内置扬声器播放，实现真正的双向对话。', iconBg: 'icon-bg-emerald', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.88.99 6.6 2.6l-2.4 2.4A4 4 0 0 0 12 10v2a2 2 0 0 0 4 0v-1a1 1 0 0 0-1-1H9"/><path d="M7 11.5A4.5 4.5 0 0 0 11.5 7"/></svg>' },
    { title: '完全开源', description: '我们提供全部的硬件原理图和软件源代码，鼓励开发者社区参与贡献，共同打造更强大的功能。', iconBg: 'icon-bg-rose', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72"/></svg>' },
    { title: '低成本方案', description: '核心采用高性价比的 ESP32-S2 芯片，让每一位爱好者都能以极低的成本构建自己的 AI 伙伴。', iconBg: 'icon-bg-amber', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>' },
    { title: '高度可扩展', description: 'ESP32-S2 拥有丰富的接口，您可以轻松为其添加屏幕、传感器或其他模块，创造更多可能性。', iconBg: 'icon-bg-sky', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-4"/><path d="M12 14V4"/><path d="M18 14v-2"/><path d="M6 14V8"/><path d="M21 12h-4"/><path d="M7 12H3"/><path d="M18 6.5 16 4l-2 2.5"/><path d="M6 6.5 8 4l2 2.5"/></svg>' }
]);
</script>

<template>
  <section id="features" class="section section-bg-white">
      <div class="container">
          <h2 class="section-title">核心功能</h2>
          <p class="section-subtitle">我们整合了先进的硬件与软件技术，为您带来无缝的智能对话体验。</p>
          <div class="features-grid">
              <div class="feature-card" v-for="feature in features" :key="feature.title">
                  <div class="feature-icon-wrapper" :class="feature.iconBg">
                      <div v-html="feature.iconSvg"></div>
                  </div>
                  <h3 class="feature-title">{{ feature.title }}</h3>
                  <p class="feature-description">{{ feature.description }}</p>
              </div>
          </div>
      </div>
  </section>
</template>